<!--
 /**
 * Date: 2022-03-22 18:08
 * Desc: newProduct 新增/编辑
 */
-->
<template>
  <zm-panel class="new-product" :title="titles" :visible.sync="value" @change="close">
    <zm-tabs :list="tabsList" v-model="activitiesTab" label-key="name" name-key="value"></zm-tabs>
    <components :ref="activitiesTab" :is="activitiesTab" :obj="obj"></components>
    <div slot="footer" class="new-product__footer">
      <zm-button @click="close" size="middle" type="default">
        取消
      </zm-button>
      <zm-button @click="onSubmit" size="middle">
        确认
      </zm-button>
    </div>
  </zm-panel>
</template>
<script>
import panelMixin from '@/mixins/panelMixin'
import NewBaseInfo from './components/newBaseInfo/index.vue'
import { createProduct, createProductMulti, updateProduct, updateProductMulti } from '@/api/src/productDraft'
export default {
  name: 'NewProduct',
  components: { NewBaseInfo },
  mixins: [panelMixin],
  props: {
    obj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      tabsList: [
        {
          value: 'NewBaseInfo',
          name: '基本信息'
        }
      ],
      activitiesTab: 'NewBaseInfo',
      submitForm: {}
    }
  },
  computed: {
    titles () {
      return this.obj.id ? '编辑实物产品' : '新建实物产品'
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    async onSubmit () {
      try {
        this.$refs[this.activitiesTab].waitSubmit()
        const form = JSON.parse(JSON.stringify(this.$refs[this.activitiesTab].form))

        let api
        if (this.obj.id) {
          api = +form.isMulti === 0 ? updateProduct : updateProductMulti
          form.id = this.obj.id
        } else {
          api = +form.isMulti === 0 ? createProduct : createProductMulti
        }

        await api(form)
        this.$message.success(`${this.titles}成功^.^!`)
        this.$emit('afterSave')
        this.close()
      } catch (err) {
        this.$message.error(`${this.titles}失败`, err)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.new-product {
  &__footer {
    text-align: center !important;
  }
}
</style>
